<template>
  <div class="pageM-templateDiv-Lu">
    <a-modal
      :visible="ApplicationFormVisible"
      title="页面添加管理"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :dialog-style="{ margin: '0 auto'}"
      wrapClassName="pageM-full-modal-Lu"
      @cancel="closeVisible"
      >
      <template slot="footer" style="text-align:center;">
        <div v-if="form.id">
          <a-button @click="closeVisible">关闭</a-button>
          <a-button type="primary" class="blue-btn" @click="editClick">确认修改</a-button>
        </div>
        <div v-else>
          <a-button @click="closeVisible">关闭</a-button>
          <a-button type="primary" class="blue-btn" @click="addClick">确认添加</a-button>
          <a-button @click="resetForm">清空</a-button>
        </div>
      </template>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="page-Management-form-model"
      >
        <a-form-model-item label="序号" ref="fxh" prop="fxh">
          <a-input
            v-model="form.fxh"
            @blur="
              () => {
                $refs.fxh.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item label="页面名称" ref="fymmc" prop="fymmc">
          <a-input
            v-model="form.fymmc"
          />
        </a-form-model-item>
        <a-form-model-item label="页面地址" ref="fymdz" prop="fymdz">
          <a-input
            v-model="form.fymdz"
          />
        </a-form-model-item>
        <a-form-model-item label="Ref" ref="ref" prop="ref">
          <a-input
            v-model="form.ref"
          />
        </a-form-model-item>
        <a-form-model-item label="业务类型" ref="fywlx" prop="fywlx">
          <a-input
            v-model="form.fywlx"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import {addPage,edit} from './service/index'
export default {
  props: {
    formData: {
      type:[Array,Object],
      default: () => {},
      required: false
    },
  },
  watch: {
    formData(newval,oldVal){
      this.form = {...newval}
    }
  },
  data() {
    return {
      ApplicationFormVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      form: {
        fxh: '',
        fymdz: '',
        fymmc: '',
        ref: '',
        fywlx: '',
        id: '',
      },
      rules: {
        fxh: [
          { required: true, message: '请输入序号', trigger: 'blur' },
        ],
        fymmc: [
          { required: true, message: '请输入页面名称', trigger: 'blur' },
        ],
        fymdz: [
          { required: true, message: '请输入页面地址', trigger: 'blur' },
        ],
        ref: [
          { required: true, message: '请输入ref', trigger: 'blur' },
        ],
        fywlx: [
          { required: true, message: '请输入业务类型', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    closeVisible(){
      this.ApplicationFormVisible = false
      this.$emit('success')
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    addClick(){
      this.$refs.ruleForm.validate(valid => {
        if(valid) {
          let data = {}
          data = {
            fxh: this.form.fxh,
            fymdz: this.form.fymdz,
            fymmc: this.form.fymmc,
            fywlx: this.form.fywlx,
            ref: this.form.ref,
            id: this.form.id,
          }
          addPage(data).then(res => {
            if(res.code == 200){
                this.closeVisible()
                this.$message.success(res.message)
              } else {
                this.$message.warning(res.message)
              }
          })
        }
      })
    },
    editClick(){
      var that = this
    //   that.$confirm({
    //     title: '您确定要修改当前数据吗?',
    //     content: '',
    //     okText: '确定',
    //     okType: 'danger',
    //     cancelText: '取消',
    //     onOk() {
          let data = {}
          data = {
            fxh: that.form.fxh,
            fymdz: that.form.fymdz,
            fymmc: that.form.fymmc,
            fywlx: that.form.fywlx,
            ref: that.form.ref,
            id: that.form.id,
          }
          edit(data).then(res => {
            if(res.code == 200){
              that.closeVisible()
              that.$message.success(res.message)
            } else {
              that.$message.warning(res.message)
            }
          })
    //     },
    //     onCancel() {
    //       //console.log('Cancel');
    //     },
    //   });
    }
  },
}
</script>
<style scoped>
.pageM-templateDiv-Lu {
  height: 100%;
}
.pageM-full-modal-Lu {
  height: 100%;
}
.page-Management-form-model {
  width: 70%;
  margin: 0 auto;
}
</style>

